<template>
    <div class="doctorregister">
        <div class="container">
            <!-- 头部信息 -->
            <header>
                <Row>
                    <Col :xs="24">
                        <div class="margin-up-down">
                            <Button
                                type="primary"
                                @click="addDoctor"
                                class="addButton"
                            >
                                <i
                                    class="iconfont icon-add"
                                    style="font-size: 14px; margin-right: 5px"
                                ></i>
                            </Button>
                        </div>
                        <div class="margin-up-down">
                            <fourLevelLinkage
                                @changeProvince="changeProvince"
                                @changeCity="changeCity"
                                @changeArea="changeArea"
                                @changeHospital="changeHospital"
                                :province="province"
                                :city="city"
                                :area="area"
                                :hospital="hospital"
                                :hospitalType="1"
                            ></fourLevelLinkage>
                        </div>
                        <div class="margin-up-down">
                            <Input
                                v-model.trim="Name"
                                placeholder="输入医生姓名/联系方式/医院名称进行查询"
                                style="width: 260px"
                                clearable
                            />
                        </div>
                        <div class="margin-up-down">
                            <Select
                                class="w-select"
                                placeholder="职称级别"
                                clearable
                                v-model="dcotorTitle"
                                style="width: 100px"
                            >
                                <Option
                                    v-for="item in titleList"
                                    :value="item.dictType"
                                    :key="item.dictType"
                                    style="text-align: center"
                                    >{{ item.dictName }}</Option
                                >
                            </Select>
                        </div>
                        <div class="margin-up-down">
                            <Button
                                type="primary"
                                icon="ios-search"
                                @click="getDoctorData(1)"
                                style="width: 51px; height: 35px"
                            ></Button>
                            <Button
                                @click="handleReset()"
                                style="width: 51px; height: 35px"
                            >
                                <i
                                    class="iconfont icon-gengxin"
                                    style="font-size: 14px; margin-right: 5px"
                                ></i>
                            </Button>
                            <!-- <Button type="primary" @click="branch"
                                >批量导入</Button
                            > -->
                        </div>
                    </Col>
                </Row>
            </header>
            <!-- 列表 -->
            <div class="list">
                <Table
                    @on-selection-change="selectChange"
                    :loading="tableLoading"
                    border
                    stripe
                    :columns="columns1"
                    :data="list"
                ></Table>
            </div>
        </div>
        <!--分页器-->
        <div class="page">
            <Page
                :total="doctorregisterSize"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="pageChange"
            />
        </div>
        <Modal v-model="modal1" title="预览信息" footer-hide>
            <p class="modal_p">{{ path }}</p>
        </Modal>
        <!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelModal"
            title="确认删除弹窗"
            class="drugmanagement-commondrug-list-delModal"
        >
            <p>删除后不可恢复，确认删除所选项吗？</p>
            <div slot="footer">
                <Button class="cancel-btn btn" @click="showDelModal = false"
                    >取消</Button
                >
                <Button
                    class="save-btn btn"
                    type="primary"
                    :loading="delLoading"
                    @click="handleDel"
                    >确认</Button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
// 医生注册信息
import cookie from "@/utils/cookie.js";
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
export default {
    components: {
        fourLevelLinkage,
    },
    data() {
        return {
            tableLoading: false,
            province: null,
            city: null,
            area: null,
            hospital: null,
            selections: [],
            doctorregisterSize: 0,
            list: [],
            Name: "",
            pageNo: 1,
            pageSize: 10,
            modal1: false,
            path: "",
            dcotorTitle: null, // 医生职称
            titleList: "",
            columns1: [
                {
                    title: "排序",
                    key: "sum",
                    width: 80,
                    align: "center",
                    render: (h, params) => {
                        let sum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h("span", sum);
                    },
                },
                { title: "机构", key: "hospitalName", align: "center" },
                { title: "科室", key: "departmentName", align: "center" },
                { title: "职称", key: "titleName", align: "center" },
                { title: "姓名", key: "name", align: "center" },
                {
                    title: "性别",
                    key: "gender",
                    align: "center",
                    render(h, params) {
                        return ["", "男", "女"][params.row.gender];
                    },
                },
                {
                    title: "身份证号",
                    key: "idcard",
                    align: "center",
                    render: (h, params) => {
                        if (params.row.idcard) {
                            // let idcard = String(params.row.idcard).replace(/(\d{6})\d{8}(\d{4})/g,'$1********$2');
                            // return idcard
                            var str1 = params.row.idcard.slice(0, 6);
                            var str2 = "";
                            var str3 = params.row.idcard.slice(14);
                            if (params.row.idcard.length == 15) {
                                str2 = "*****";
                            } else {
                                str2 = "********";
                            }
                            let idcard = str1 + str2 + str3;
                            return idcard;
                        }
                    },
                },
                { title: "手机号", key: "phone", align: "center" ,
                render: (h, params) => {
            if(params.row.phone){
              let phone = params.row.phone.replace(/^(.{3})(?:\w+)(.{4})$/, "\$1****\$2") ;
              return phone
            }
            }
                },
                {
                    title: "设置",
                    key: "iOperate",
                    width: 200,
                    align: "center",
                    render: (h, params) => {
                        let row = params.row;
                        return h("div", [
                            !params.row.wyAccid
                                ? h(
                                      "span",
                                      {
                                          props: {
                                              type: "primary",
                                              size: "small",
                                          },
                                          style: {
                                              color: "#21c780",
                                              margin: "0px 6px",
                                          },
                                          on: {
                                              click: () => {
                                                  this.handleEdit(row);
                                              },
                                          },
                                      },
                                      "编辑"
                                  )
                                : null,
                            h(
                                "span",
                                {
                                    props: {
                                        size: "small",
                                    },
                                    style: {
                                        color: "#5362e1",
                                        margin: "0px 6px",
                                    },
                                    on: {
                                        click: () => {
                                            this.handleReview(row);
                                        },
                                    },
                                },
                                "详情"
                            ),
                            !params.row.wyAccid
                                ? h(
                                      "span",
                                      {
                                          props: {
                                              type: "error",
                                              size: "small",
                                          },
                                          style: {
                                              color: "#fc6c49",
                                              marginLeft: "6px",
                                          },
                                          on: {
                                              click: () => {
                                                  this.handleRemove(row);
                                              },
                                          },
                                      },
                                      "删除"
                                  )
                                : null,
                        ]);
                    },
                },
            ],
            data1: [],
            showDelModal: false,
            delLoading: false,
            delType: null, // single batch
            curRecord: null,
            type: 3,
        };
    },
    created() {
        this.type = this.$route.query.type ? this.$route.query.type : 3;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/indexManagement/index",
                title: "索引管理",
            },
            {
                path: "/index/doctorOperation/doctorregister/list",
                title: "医生注册信息",
            },
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
        if (pageNo) {
            this.pageNo = pageNo;
        }
        this.getTitleList();
        this.getDoctorData(this.pageNo);
    },
    methods: {
        // 批量导入
        branch() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/doctorregister/batchone",
                {
                    pageNo: this.pageNo,
                }
            );
        },
        getTitleList() {
            this.$axios
                .post(api.findDoctorTitleListByDoctorType, { type: this.type })
                .then((resp) => {
                    this.titleList = resp.data.object;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        selectChange(selections) {
            this.selections = selections;
        },
        handleReset() {
            this.pageNo = 1;
            this.pageSize = 10;
            if (
                cookie.getCookie("idtt") === "2" ||
                cookie.getCookie("idtt") === "3"
            ) {
            } else {
                this.province = null;
                this.city = null;
            }
            this.area = null;
            this.Name = "";
            this.hospital = null;
            this.dcotorTitle = null;
            this.getDoctorData(this.pageNo);
        },
        handleEdit(item) {
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/doctorregister/edit",
                {
                    pageNo: this.pageNo,
                    id: item.id,
                    type: this.type,
                }
            );
        },
        handleRemove(record) {
            this.delType = "single";
            this.showDelModal = true;
            this.curRecord = record;
        },
        handleDel() {
            if (this.delType === "single") {
                this.delByDoctorIds([this.curRecord.id]);
            } else if (this.delType === "batch") {
                if (!this.selections.length) {
                    this.$Message.info("请勾选删除项");
                    return false;
                }
                this.delByDoctorIds(this.selections.map((item) => item.id));
            }
        },
        handleReview(item) {
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/doctorregister/review",
                {
                    pageNo: this.pageNo,
                    id: item.id,
                    type: this.type,
                }
            );
        },
        addDoctor() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/doctorregister/add",
                {
                    pageNo: this.pageNo,
                    type: this.type,
                }
            );
        },
        // 分页
        pageChange(index) {
            this.getDoctorData(index);
        },
        // 显示简介
        simple(item) {
            if (!Boolean(item.personalIntroduction)) {
                this.$Message.info("暂无医生简介");
                return "";
            }
            this.modal1 = true;
            this.path = item.personalIntroduction;
        },
        // 显示特长
        simples(item) {
            if (!Boolean(item.doctorGood)) {
                this.$Message.info("暂无医生特长");
                return "";
            }
            this.modal1 = true;
            this.path = item.doctorGood;
        },
        delByDoctorIds(idArr) {
            this.delLoading = true;
            this.$axios
                .post(api.delByDoctorIds, idArr)
                .then((res) => {
                    if (res.data.code === 1) {
                        this.$Message.success("删除成功");
                        this.getDoctorData();
                        this.showDelModal = false;
                    } else {
                        this.$Modal.error({
                            content: res.data.object
                                .map((item) => `<p>${item}</p>`)
                                .join("<br />"),
                            okText: "确认",
                            onOk: () => {
                                this.showDelModal = false;
                            },
                        });
                        this.$Message.info(res.data.message);
                    }
                    this.delLoading = false;
                })
                .catch(() => {
                    let err = res.data.object;
                    this.delLoading = false;
                    this.$Message.error(err);
                });
        },
        // 获取页面数据
        getDoctorData(pageNo) {
            if (pageNo) {
                this.pageNo = Number(pageNo);
            }
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                type: this.type,
            };
            if (this.Name != "") {
                params.searchKey = this.Name.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.title = this.dcotorTitle ? this.dcotorTitle : null;
            this.tableLoading = true;
            this.$axios
                .post(api.getDoctorInfo, params)
                .then((res) => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.doctorregisterSize = ret.total;
                        let arr = ["个人注册", "批量导入", "平台注册"];
                        if (ret.records) {
                            ret.records.forEach((item, index) => {
                                item.sum = this.addZeros(index);
                                // item.gender = item.gender == "0" ? "女" : "男";
                                item.ibatch = arr[item.ibatch];
                            });
                            this.list = ret.records;
                        } else {
                            this.list = [];
                        }
                    } else {
                        this.$Message.info(res.data.message);
                    }
                    this.tableLoading = false;
                })
                .catch(() => {
                    this.tableLoading = false;
                });
        },
    },
    watch: {
        pageSize(nv, ov) {
            this.getDoctorData(this.pageNo);
        },
    },
};
</script>
<style lang="less" scoped>
.doctorregister {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .addButton {
        border: 1px solid #21c780;
        background-color: #21c780;
    }
    .container {
        width: 100%;
        margin: 0 auto;
        header {
            width: 100%;
            position: relative;
            .search {
                margin: 10px 0;
            }
        }
        .list {
            width: 100%;
            margin: 10px 0;
        }
    }
    .page {
        text-align: center;
    }
}
</style>